{% load humanize %}
{% load firecares_tags %}

<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>
<html class="no-js ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head lang="en">
    <meta charset="UTF-8">
    <meta name="description" content="{{ object.description }} Learn more about this community's risks.">
    <meta name="author" content="Prominent Edge LLC">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <title>Community Assessment: {{ object.name }}</title>
    {% include 'firestation/_favicon.html' %}
    {% include "firestation/_firecares_style.html" %}

    <script type="text/javascript">
    var config = {
      geom: {{ object.geom.json|safe|default:"null" }},
      centroid: [{{ object.headquarters_address.geom.centroid.y }}, {{ object.headquarters_address.geom.centroid.x }}],
      id: {{object.id}},
      showParcels: {{ user.is_authenticated|yesno:"true,false"}},
      superUser: {{ user.is_superuser|yesno:"true,false"}},
      staff: {{ user.is_staff|yesno:"true,false"}},
      emsTransport: {{object.ems_transport|yesno:"true,false"}},
      cfai_accredited:{{object.cfai_accredited|yesno:"true,false"}},
      boundary_verified:{{object.boundary_verified|yesno:"true,false"}},
      staffing_verified:{{object.staffing_verified|yesno:"true,false"}},
      stations_verified:{{object.stations_verified|yesno:"true,false"}}
    };

    var urls = {
      "models_performance_score": "{% url 'models_performance_score' %}"
    };

    {% if object.display_metrics %}
    var metrics = {
        "population_metrics_rows": {{ object.metrics.population_metrics_rows | jsonify }},
        "dist_model_risk_model_greater_than_size_2_quartile": {{ object.metrics.dist_model_risk_model_greater_than_size_2_quartile | jsonify }},
        "dist_model_residential_fires_quartile": {{ object.metrics.dist_model_residential_fires_quartile | jsonify }},
        "dist_model_risk_model_deaths_injuries_quartile": {{ object.metrics.dist_model_risk_model_deaths_injuries_quartile | jsonify }},
        "national_risk_model_size1_percent_size2_percent_sum_quartile": {{ object.metrics.national_risk_model_size1_percent_size2_percent_sum_quartile | jsonify }},
        "national_risk_model_deaths_injuries_sum_quartile": {{ object.metrics.national_risk_model_deaths_injuries_sum_quartile | jsonify }},
        "residential_fires_3_year_avg": {{ object.metrics.residential_fires_3_year_avg | jsonify }},
        "risk_model_fires": {{ object.metrics.risk_model_fires | jsonify }},
        "residential_fires_avg_3_years_breaks": {{ object.metrics.residential_fires_avg_3_years_breaks | jsonify }},
        "dist_model_score": {{ object.metrics.dist_model_score | jsonify }},
        "dist_model_score_fire_count": {{ object.metrics.dist_model_score_fire_count | jsonify }},
        "population_class_stats": {{ object.metrics.population_class_stats | jsonify }},
        "risk_model_deaths": {{ object.metrics.risk_model_deaths | jsonify }},
        "risk_model_fires_size0": {{ object.metrics.risk_model_fires_size0 | jsonify }},
        "risk_model_fires_size1": {{ object.metrics.risk_model_fires_size1 | jsonify }},
        "risk_model_fires_size2": {{ object.metrics.risk_model_fires_size2 | jsonify }},
        "nfirs_deaths_and_injuries_sum": {{ object.metrics.nfirs_deaths_and_injuries_sum | jsonify}},
        "deaths_and_injuries_sum": {{ object.metrics.deaths_and_injuries_sum | jsonify }},
        "residential_structure_fire_counts": {{ object.metrics.residential_structure_fire_counts | jsonify }}
    };
    {% else %}
    var metrics = {
        "nfirs_deaths_and_injuries_sum": {{ object.metrics.nfirs_deaths_and_injuries_sum | jsonify }},
        "residential_fires_3_year_avg": {{ object.metrics.residential_fires_3_year_avg | jsonify }},
        "residential_structure_fire_counts": {{ object.metrics.residential_structure_fire_counts | jsonify }}
    };
    {% endif %}
    var level = "all";
    </script>
    {% include 'google_analytics.html' %}
</head>

<body class="ct-headroom--fixedTopBar cssAnimate" ng-controller="jurisdictionController" ng-app="fireStation" ng-init="setLevel('all')">

{% include 'firestation/_mobile_navbar.html' %}
{% include 'firestation/_mobile_search.html' %}

<div id="ct-js-wrapper" class="ct-pageWrapper">

<div class="ct-navbarMobile">
    <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand logo" href="{% url 'firestation_home' %}"><h1>FireCARES</h1></a>
    <button type="button" class="searchForm-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span><i class="fa fa-search"></i></span>
    </button>
</div>

{% include "firestation/_navbar.html" %}

<div class="ct-site--map">
    <div class="container">
        <a href="{% url 'firestation_home' %}">Home</a>
        <a href="{% url 'firedepartment_list' %}">Departments</a>
        <a href="{% url 'firedepartment_detail' object.id %}">{{ object.name }}</a>
    </div>
</div>
<header class="ct-mediaSection" style="overflow: initial">
    <div class="ct-mediaSection-inner">
        <div class="container">
            <div class="ct-u-displayTableVertical">
                <div class="ct-textBox ct-u-text--white ct-u-displayTableCell text-left">
                    {% if object.boundary_verified = True and object.staffing_verified = True and object.stations_verified = True %}
                        {% if user_can_change or user.is_superuser %}
                        <h2>{{ object.name }}<span style="bottom: 14px;position: relative;padding-left:2px;"><a href="{%url 'firedepartment_data_validation' object.id %}"><img src="{{ STATIC_URL }}images/verified-badge.png" title="Department Data Verified"></a></span></h2>
                        {% else %}
                        <h2>{{ object.name }}<span style="bottom: 14px;position: relative;padding-left:2px;"><img src="{{ STATIC_URL }}images/verified-badge.png" title="Department Data Verified"></span></h2>
                        {% endif %}
                    {% else %}
                    <h2>{{ object.name }}</h2>
                    {% endif %}
                    <h4>{{ object.headquarters_address.get_row_display }}</h4>
                    <span class="ct-productID ct-fw-300">
                        FDID: <span>{{ object.fdid }}</span>
                    </span>
                    {% if object.cfai_accredited %}
                    <span class="ct-productID ct-fw-300" style='margin-left: 2px;'>
                        <a href="http://www.cpse.org/agency-accreditation/about-accreditation-cfai.aspx" target="_blank" style="color:#F29A00;"><i class="fa fa-shield"></i> CFAI Accredited </a>
                    </span>
                    {% endif %}
                    {% if object.archived %}
                        <span class="ct-productID ct-fw-300" style="margin-left: 10px">
                            <span>ARCHIVED</span>
                        </span>
                    {% endif %}
                </div>
                <div class="ct-u-displayTableCell text-right">
                    {% include 'firestation/_department_header.html' %}
                    {% if user.is_authenticated %}
                        <feedback
                            class="btn btn-sm btn-transparent–border"
                            url="{%url 'firedepartment_data_feedback_slug' object.id object.slug %}"
                            user="{{ user.id }}""
                            firedepartment="{{ object.id }}"
                            firestation=""
                            csrftoken="{{ csrf_token }}"
                        >
                            <i class="fa fa-bullhorn fa-2x ct-u-text--white"></i>
                        </feedback>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</header>
<div class="loading-container">
<div class="loading" id="loading">
</div>
<section class="ct-u-paddingBottom60">
    <div class="container">
        {% include 'firestation/_message_notifications.html' with use_angular=True %}
        <div class="ct-productMeta--single ">
            <div class="row">
                <div class="col-md-9">
                    <div class="ct-u-displayTableVertical">
                        <div class="ct-u-displayTableCell text-left">
                            <i class="fa fa-clock-o"></i><h6>Last Updated: {{ object.modified }}</h6>
                        </div>

                        <div class="ct-u-displayTableCell text-center">
                        </div>

                        <div class="ct-u-displayTableCell text-right">
                            {% if user.is_authenticated %}
                                <feedback
                                    class="usgs-update-link"
                                    url="{%url 'firedepartment_data_feedback_slug' object.id object.slug %}"
                                    user="{{ user.id }}""
                                    firedepartment="{{ object.id }}"
                                    firestation=""
                                    csrftoken="{{ csrf_token }}"
                                >
                                    <i class="fa fa-bullhorn"></i>  Feedback
                                </feedback>
                            {% endif %}
                            <a href="" class="usgs-update-link" ng-click="toggleFullScreenMap()"><i class="fa fa-arrows-alt"></i> View Fullscreen Map</a>
                            {% if user_can_change %}
                            <div class="dropdown pull-right">
                                <a href="" class="usgs-update-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    <i class="fa fa-cog"></i>
                                    Tools
                                </a>
                                <ul class="dropdown-menu in-front" aria-labelledby="dropdownMenu1">
                                    <li>
                                        <a href="{% url 'department_boundary_shapefile' object.id object.slug %}">
                                            <i class="fa fa-download"></i>
                                            Download District Boundary
                                            <span class="format">(shp)</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{% url 'firedepartment_update_government_units' object.id %}">
                                            <i class="fa fa-edit"></i>
                                            Update government units
                                        </a>
                                    </li>
                                    {% if user.is_superuser %}
                                    <li>
                                        <a href="" ng-click="toggleBoundary()" ng-class="{active: shp !== null}">
                                            <i class="fa fa-cloud-upload"></i>
                                            Upload Boundary
                                        </a>
                                    </li>
                                    <li>
                                        <a href="" ng-controller="ImportController" ng-click="open(null, '{{ STATIC_URL }}osgeo_importer/partials/uploadWizard.html', '{{ STATIC_URL }}mapstory/img/mapstory-icon.png', '{{STATIC_URL}}')">
                                            <i class="fa fa-cloud-upload"></i>
                                            Update Data
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{% url 'admin:firestation_firedepartment_change' object.id %}" target="_blank">
                                            <i class="fa fa-cogs"></i>
                                            Access Department Admin Page
                                        </a>
                                    </li>
                                    {% endif %}
                                    {% if user_can_change or user.is_superuser %}
                                    <li>
                                        <a href="{% url 'firedepartment_data_validation' object.id %}">
                                            <i class="fa fa-check-circle"></i>
                                            Validate Department Data
                                        </a>
                                    </li>
                                    {% endif %}
                                    <li>
                                        <a href="{% url 'remove_intersecting_departments' object.id %}">
                                            <i class="fa fa-scissors"></i>
                                            Remove Intersections
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% if user_can_change %}
                    <div>
                        <div ng-show="shp">
                            <form name="boundaryUpload">
                                <input class="hide" type="file" name="newBoundary" onchange="angular.element(this).scope().processBoundaryShapefile(this.files[0])"/>
                                <a href="" class="commit" ng-click="commitBoundary()">Save updated boundary</a>
                                <a href="" ng-click="cancelBoundary()">Cancel</a>
                            </form>
                        </div>
                    </div>
                    {% endif %}
                </div>
                <div class="col-md-3 text-center risk-filter ct-productMeta--single">
                    <div class="ct-u-displayTableVertical">
                        <div class="ct-u-displayTableCell">
                            {% verbatim %}
                            <div class="dropdown">
                                <button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="riskLevelDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    <span ng-if="level !== 'all'">Filter by {{ level }} hazard level</span>
                                    <span ng-if="level === 'all'">Display all hazard levels</span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="riskLevelDropdown">
                                    <li><a href ng-click="setLevel('low')">Low</a></li>
                                    <li><a href ng-click="setLevel('medium')">Medium</a><li>
                                    <li><a href ng-click="setLevel('high')">High</a></li>
                                    <li><a href ng-click="setLevel('unknown')">Unknown</a></li>
                                    <li><a href ng-click="setLevel('all')">All levels</a></li>
                                </ul>
                            </div>
                            {% endverbatim %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ct-section--products">
            <div class="row">
                <div class="col-md-8 col-lg-9">
                    <div class="ct-gallery">
                        <div id="map"></div>
                    </div>
                    {% verbatim %}
                    <div class="text-center no-select ct-u-marginTop20" ng-if="showServiceAreaChart">
                        <div class="metric-cards-title ct-u-marginTop20">
                            <h5>Structure Hazard Level Distribution by Travel Time</h5>
                        </div>
                        <div class="metric-card">
                            <div class="main-text" ng-if="showServiceAreaChart">
                                <risk-servicearea-bar-chart width="605" height="150" 
                                    dataset="{{ parcel_hazard_level_counts }}">
                                </risk-servicearea-bar-chart>
                                <div class="description text-center">
                                        {{ department_personnel_counts }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center no-select ct-u-marginTop20" ng-if="showEFFFChart">
                        <div class="metric-cards-title ct-u-marginTop20">
                            <h5>Effective Response Force Coverage</h5>
                        </div>
                        <div class="metric-card">
                            <div class="main-text" ng-if="showEFFFChart">
                                <risk-efffarea-bar-chart width="695" height="150" 
                                    dataset="{{ parcel_efff_counts }}">
                                </risk-efffarea-bar-chart>
                                <div class="description text-center">
                                        {{ department_personnel_counts }}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endverbatim %}

                    <div class="text-center no-select ct-u-marginTop20" ng-if="showHeatmapCharts">
                        <bar-chart heatmap-class="fire" class="hidden-xs" filter-type="yearsMonths" metric-title="HISTORY" width="800" height="150" max-years="8"></bar-chart>
                        <bar-chart heatmap-class="fire" class="visible-xs" filter-type="yearsMonths" metric-title="HISTORY" width="400" height="150" max-years="6"></bar-chart>
                        <br/>
                        <aster-chart heatmap-class="fire" filter-type="months" metric-title="MONTH" label-offset="5"></aster-chart>
                        <aster-chart heatmap-class="fire" filter-type="daysOfWeek" metric-title="DAY" label-offset="5"></aster-chart>
                        <aster-chart heatmap-class="fire" filter-type="hours" metric-title="HOUR"></aster-chart>
                        <aster-chart heatmap-class="fire" filter-type="risk" metric-title="HAZARD"></aster-chart>
                    </div>
                    <div class="text-center no-select ct-u-marginTop20" ng-if="showEMSHeatmapCharts">
                        <bar-chart heatmap-class="ems" class="hidden-xs" filter-type="yearsMonths" metric-title="HISTORY" width="800" height="150" max-years="8"></bar-chart>
                        <bar-chart class="visible-xs" heatmap-class="ems" filter-type="yearsMonths" metric-title="HISTORY" width="400" height="150" max-years="6"></bar-chart>
                        <br/>
                        <aster-chart heatmap-class="ems" filter-type="months" metric-title="MONTH" label-offset="5"></aster-chart>
                        <aster-chart heatmap-class="ems" filter-type="daysOfWeek" metric-title="DAY" label-offset="5"></aster-chart>
                        <aster-chart heatmap-class="ems" filter-type="hours" metric-title="HOUR"></aster-chart>
                        <aster-chart heatmap-class="ems" filter-type="risk" metric-title="HAZARD"></aster-chart>
                    </div>
                    {% include 'firestation/_department_community_risk.html' %}
                    <div class="row">
                        <div class="col-md-4">
                            <div class="ct-heading ct-u-marginBottom20">
                                <h3>Summary</h3>
                            </div>
                            <div class="ct-u-displayTableVertical ct-productDetails">
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Department Type</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.department_type }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">NFPA Region</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.region }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">FDID</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.fdid }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">State</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.state }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Phone</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.headquarters_phone|phonenumber|default:"Unknown" }}</span>
                                    </div>
                                </div>
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Fax</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.headquarters_fax|phonenumber|default:"Unknown" }}</span>
                                    </div>
                                </div>
                                {% if object.iaff %}
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">IAFF</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span>{{ object.iaff }}</span>
                                    </div>
                                </div>
                                {% endif %}
                                {% if object.twitter_handle %}
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600">Twitter</span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                        <span><a href="https://twitter.com/{{ object.twitter_handle }}" target="_blank">@{{object.twitter_handle}} <i class="fa fa-external-link ct-fw-600"></i></a></span>
                                    </div>
                                </div>
                                {% endif %}
                                {% if object.website %}
                                <div class="ct-u-displayTableRow">
                                    <div class="ct-u-displayTableCell">
                                        <span class="ct-fw-600"><a href="{{ object.website }}" target="_blank">Official Website <i class="fa fa-external-link ct-fw-600"></i></a></span>
                                    </div>
                                    <div class="ct-u-displayTableCell text-right">
                                    </div>
                                </div>
                                {% endif %}
                            </div>
                            {% if object.metrics.structure_counts_by_risk_category.low != None or object.metrics.structure_counts_by_risk_category.medium != None or object.metrics.structure_counts_by_risk_category.high != None or object.metrics.structure_counts_by_risk_category.unknown != None %}
                            <div class="metric-cards-title ct-u-marginTop20">
                                <h4>Structure Hazard Level Distribution</h4>
                            </div>
                            <div class="metric-card">
                                <div class="main-text">
                                    <risk-distribution-bar-chart width="180" height="150"
                                        low="{{ object.metrics.structure_counts_by_risk_category.low | default_if_none:'' }}"
                                        medium="{{ object.metrics.structure_counts_by_risk_category.medium | default_if_none:'' }}"
                                        high="{{ object.metrics.structure_counts_by_risk_category.high | default_if_none:'' }}"
                                        unknown="{{ object.metrics.structure_counts_by_risk_category.unknown | default_if_none:'' }}">
                                    </risk-distribution-bar-chart>
                                    <div class="description text-center">
                                        {{ object.metrics.total_protected_structures|intcomma }} total structures protected
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                        <div class="col-md-8">
                            <div class="ct-heading ct-u-marginBottom10">
                                <h3>Description</h3>
                            </div>
                            <p class="ct-u-marginBottom50">
                                {{ object.description }}
                            </p>
                            <div class="community-stats ct-u-marginBottom40">
                                <div class="row">
                                    <div class="col-md-6 ct-u-marginBottom20">
                                        <i class="icon-people pull-left"></i>
                                        {% if object.population %}
                                            <h4>{{ object.population|intcomma }}</h4>
                                        {% else %}
                                            <h4>Not Available</h4>
                                        {% endif %}
                                        <h5>Protected Population</h5>
                                    </div>
                                    <div class="col-md-6 ct-u-marginBottom20">
                                        <i class="icon-shield pull-left"></i>
                                        {% if object.geom_area %}
                                            <h4>{{ object.geom_area|floatformat:"2"|intcomma}}<span>mi&sup2;</span></h4>
                                        {% else %}
                                            <h4>Not Available</h4>
                                        {% endif %}
                                        <h5>Community Size</h5>
                                    </div>
                                </div>
                            </div>

                            <div class="ct-heading ct-u-marginBottom10">
                                <h3>Annual Structure Fires</h3>
                                <selected-risk level="level"></selected-risk>
                            </div>
                            <p class="ct-u-marginBottom20">Annual structure fire counts for the {{ object.name }} based on the National Fire Incident Reporting System (NFIRS).
                            </p>
                            <div class="ct-section--products ct-section--products2col ct-u-marginBottom40">
                                <table class="table table-striped residential-fires">
                                    <thead class="ct-fw-700">
                                        <tr>
                                            <td align="left">Year</td>
                                            <td align="left">Structure Fires</td>
                                            <td align="center">Total Fire Calls</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% verbatim %}
                                    <tr ng-repeat="stat in residential_structure_fire_counts[level]">
                                        <td align="left">{{ stat.year }}</td>
                                        <td align="left" ng-if="stat.count">{{ stat.count | number | defaultValue:"Not Available" }}</td>
                                        <td align="left" ng-if="!stat.count">Not Available</td>
                                        <td align="center" style="width: 70px">
                                            <bar-gauge min="{{ !stat.count ? 'N/A' : stat.year_min }}" max="{{ !stat.count ? 'N/A' : stat.year_max }}" value="{{ stat.count }}" inverse></bar-gauge>
                                        </td>
                                    </tr>
                                    <tr ng-show="!residential_structure_fire_counts[level].length">
                                        <td colspan="4" class="text-center">
                                            <strong>No information for this risk level</strong>
                                        </td>
                                    </tr>
                                    {% endverbatim %}
                                    </tbody>
                                </table>
                            </div>

                            <a name="stations"></a>
                            {% if not firestations %}
                            <div class="ct-heading ct-u-marginBottom20">
                                <h3 style="line-height: 33px;">No stations linked to this department </h3>
                                {% if user_can_change or user.is_superuser %}
                                <div class="dropdown pull-right">
                                    <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="dropdownMenuStation" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        <i class="fa fa-cog"></i>
                                      </button>
                                    <ul class="dropdown-menu in-front" aria-labelledby="dropdownMenuStation">
                                        {% if user.is_superuser %}
                                        <li>
                                            <a href="{% url 'addstation' object.id %}">
                                                <i class="fa fa-plus"></i>
                                                Add New Station
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if user_can_change or user.is_superuser %}
                                        <li>
                                            <a href="{% url 'firedepartment_data_validation' object.id %}">
                                                <i class="fa fa-check-circle"></i>
                                                Validate Department Data
                                            </a>
                                        </li>
                                        {% endif %}
                                    </ul>
                                </div>
                                {% endif %}
                            </div>
                            {% else %}

                            <div class="ct-heading ct-u-marginBottom20">
                                <h3 class="text-uppercase"> {{ firestations.paginator.count }} Stations</h3>

                                <div class="dropdown pull-right">
                                  <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    <i class="fa fa-download"></i>
                                  </button>
                                  <ul class="dropdown-menu download-menu" aria-labelledby="dropdownMenu1">
                                    <li><a href="{% url 'department_stations_shapefile' object.id object.slug %}">Download Locations <span class="format">(shp)</span></a></li>
                                    <li><a href="{% url 'department_districts_shapefile' object.id object.slug %}">Download Districts <span class="format">(shp)</span></a></li>
                                  </ul>
                                </div>
                                {% if user_can_change or user.is_superuser %}
                                <div class="dropdown pull-right">
                                    <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="dropdownMenuStation" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                        <i class="fa fa-cog"></i>
                                      </button>
                                    <ul class="dropdown-menu in-front" aria-labelledby="dropdownMenuStation">
                                        {% if user.is_superuser %}
                                        <li>
                                            <a href="{% url 'addstation' object.id %}">
                                                <i class="fa fa-plus"></i>
                                                Add New Station
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if user_can_change or user.is_superuser %}
                                        <li>
                                            <a href="{% url 'firedepartment_data_validation' object.id %}">
                                                <i class="fa fa-check-circle"></i>
                                                Validate Department Data
                                            </a>
                                        </li>
                                        {% endif %}
                                    </ul>
                                </div>
                                {% endif %}
                            </div>
                            {% include "firestation/_fire_station_table.html" %}
                            <div class="ct-u-marginBottom30">
                                {% include 'firestation/_pagination.html' with url_postfix='#stations' %}
                            </div>
                            {% endif %} <!-- if not firestations -->
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-lg-3">
                    <div class="ct-js-sidebar">
                        <div class="row">
                            {% include 'firestation/_performance_score.html' %}
                            <div class="col-sm-6 col-md-12 ct-u-marginBottom10">
                                {% include 'firestation/_department_safe_grades.html' %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="ct-u-paddingBoth60 ct-js-section" data-bg-color="#f3f3f3">
    <div class="container">
        <div class="ct-heading ct-u-marginBottom30">
            <h3>Similar Departments</h3>
            <a href="{% url 'similar_departments_slug' object.id object.slug %}" class="pull-right">
                <i class="fa fa-angle-right"></i>
                <h4>View More</h4>
            </a>
        </div>
        <div class="ct-js-owl ct-owl-controls--type2" data-single="false" data-items="4">
            {% for department in object.similar_departments|slice:":15" %}
            <div class="item">
                {% include 'firestation/_fire_department_card.html' %}
            </div>
            {% endfor %}
        </div>
    </div>
</section>
</div>
{% include 'firestation/_footer.html' %}
</div>

{% include "firestation/_firecares_scripts.html" %}
<script type="text/javascript">
    var opts = {
      lines: 13 // The number of lines to draw
    , length: 28 // The length of each line
    , width: 14 // The line thickness
    , radius: 42 // The radius of the inner circle
    , scale: 1 // Scales overall size of the spinner
    , corners: 1 // Corner roundness (0..1)
    , color: '#000' // #rgb or #rrggbb or array of colors
    , opacity: 0.25 // Opacity of the lines
    , rotate: 0 // The rotation offset
    , direction: 1 // 1: clockwise, -1: counterclockwise
    , speed: 1 // Rounds per second
    , trail: 60 // Afterglow percentage
    , fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
    , zIndex: 2e9 // The z-index (defaults to 2000000000)
    , className: 'spinner' // The CSS class to assign to the spinner
    , top: '10%' // Top position relative to parent
    , left: '50%' // Left position relative to parent
    , shadow: false // Whether to render a shadow
    , hwaccel: false // Whether to use hardware acceleration
    , position: 'absolute' // Element positioning
    }
    var target = document.getElementById('loading')
    var spinner = new Spinner(opts).spin(target);
</script>
</body>
</html>
